import React, {memo, useState, useEffect } from "react";

import URef from "./useRef";
import UContext from "./context";
import Usememo from "./useMemo";
import Usecallback from "./useCallback";
import Test from "./test";
import Useimperativehandle from "./useImperativeHandle";
import Uselayouteffect from "./useLayoutEffect";
import Myhook from "./自定义hook";
import Usereducer from "./useReducer";
const index = memo(() => {
  const [pp, setPP] = useState(0);
  const [func] = useState(() => {
    return { name: "xxx" };
  });

  useEffect(() => {
    console.log("挂载");
    return () => {
      console.log("销毁");
    };
  }, [pp]);
  return (
    <div>
      <h1>正常useState</h1>
      {pp}{" "}
      <button
        onClick={(v) => {
          setPP(pp + 1);
        }}
      >
        pp+
      </button>
      <hr/>
      <h1>函数式useState</h1>
      <div>{func.name}</div>
      <hr/>
      <URef></URef>
      <hr/>
      <UContext></UContext>
      <hr/>
      <Usememo></Usememo>
      <hr/>
      <Usecallback></Usecallback>
      <h1>
      Test
      </h1>
      <hr/>
      <Test></Test>
      <h1>useImperativeHandle</h1>
      <Useimperativehandle></Useimperativehandle>
      <hr/>
      <h1>Uselayouteffect 和 useEffect一样 但是他是在浏览器执行绘制之前执行 (会阻塞组件挂载 慎用)  </h1>
      <Uselayouteffect></Uselayouteffect>
      <hr/>
      <h1>自定义hook</h1>
      <Myhook></Myhook>
      <hr/>
      <h1>Usereducer</h1>
      <Usereducer></Usereducer>
    </div>
  );
});

export default index;
